<template>
	<div class="videoBox" v-if="records.length > 0">
		<div class="video">
			<div class="videoTop">
				<div class="videoTopLfet">
					<span class="iconfont icon-Video-two"></span>
					<span class='home_title'>精选视频</span>
				</div>
				<!-- <span class="iconfont icon-a-Right-cyou-yuan videoTopRight"></span> -->
			</div>
			<div class="videoCenter">
				<div class="videoCenterLeft">
					<div class="titleBox">
						<span class="iconfont icon-Play-one"></span>
						<span class="p1 flowHidden">{{ records[0].title }}</span>
					</div>
					<a class='block_a' :href="Path+records[0]?.url" target="_blank">
					    <img :src="getImgPath(records[0]?.headImag)" alt="" class="img1 pic_width" />
					</a>
				</div>
				<div class="videoCenterRight" v-if='records.length > 1'>
					<div class="videotwtop">
						<div class="titleBox">
							<span class="iconfont icon-Play-one"></span>
							<span class="p1 flowHidden">{{ records.length >1? records[1]?.title:'' }}</span>
						</div>
						<a class='block_a' :href="Path+records[1]?.url" target="_blank">
						    <img :src="records.length > 1? getImgPath(records[1]?.headImag) : ''" alt="" class="img1 pic_width" />
						</a>
					</div>
					<div class="videotwbtm" v-if='records.length > 2'>
						<div class="titleBox">
							<span class="iconfont icon-Play-one"></span>
							<span class="p1 flowHidden">{{ records.length >2? records[2]?.title:'' }}</span>
						</div>
					  <a class='block_a' :href="Path+records[2]?.url" target="_blank">
						   <img :src="records.length > 2 ? getImgPath(records[2]?.headImag) : ''" alt="" class="img1 pic_width" />
						</a>
					</div>
				</div>
			</div>
			<div class="videoBottom">
				<div v-for="item in recordsSlice.length > 0 && recordsSlice" class="videoBtmBox">
					<div class="titleBox">
						<span class="iconfont icon-Play-one"></span>
						<span class="p1 flowHidden">{{ item.title }}</span>
					</div>
					<a class='block_a' :href="Path+item.url" target="_blank">
					    <img :src="getImgPath(item.headImag)" alt="" class="img1 pic_width" />
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			font: 1,
			isMouse: -1,
			params: {
				pageSize: 10,
				pageNum: 1
				// typeIdStr: 1001,
			},
			records: [],
			recordsSlice: [],
			Path:getRootPath(),
		};
	},
	mounted() {
		this.headline();
	},
	methods: {
		isSwitch(val) {
			this.font = val;
		},
		headline() {
			// 获取子栏目
			
			let prs = {
				pageSize: 8,
				pageNum: 1,
				//channelIdStr: 6716, // 视频栏目
				channelPaths:'sp',
				isTop: true
			};
			contentApi.fetchContentOfChannel(prs, res => {
				if (res.code == '00000 00000') {
					this.records = res.data.records
					if (this.records.length >= 4) {
								this.recordsSlice = this.records.slice(3, 8)
					}
				} else {
				}
			});
		},
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style scoped="scoped">
.videoBox {
  margin-top: 12px;
  width: 100%;
  height: 729px;
  background: #333333;
  color: #fff;
  display: flex;
  justify-content: center;
}
.videoBox .video {
  width: 1200px;
  margin-top: 40px;
}
.videoBox .video .titleBox {
  position: absolute;
  display: inline-block;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  z-index: 100;
  display: flex;
}
.videoBox .video .titleBox .icon-Play-one {
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  align-items: center;
  text-align: center;
}
.videoBox .video .videoTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.videoBox .video .videoTop .videoTopLfet {
  cursor: pointer;
  height: 30px;
  font-size: 30px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 30px;
}
.videoBox .video .videoTop .videoTopLfet .iconfont {
  font-size: 30px;
  height: 30px;
  line-height: 30px;
  margin-right: 8px;
}
.videoBox .video .videoTop .videoTopRight {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}
.videoBox .video .videoTop .videoTopRight:hover {
  color: #fff;
}
.videoBox .video .videoCenter {
  margin-top: 24px;
  display: flex;
}
.videoBox .video .videoCenter .videoCenterLeft {
  width: 792px;
  height: 446px;
  position: relative;
  cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
}
.videoBox .video .videoCenter .videoCenterLeft .img1 {
  width: 792px;
  height: 446px;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: cover;
  transition: all  1.3s;
  border-radius: 4px;
}
.videoBox .video .videoCenter .videoCenterLeft:hover img {
  transform: scale(1.1);
}
.videoBox .video .videoCenter .videoCenterLeft .titleBox {
 height: 76px;
 background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
 border-radius: 0px 0px 4px 4px;
 opacity: 1;
 width: 100%;
 padding: 0 32px 24px;
 box-sizing: border-box;
 line-height: 134px;
 display: flex;
 align-items: end;
 left: 0;
 right: 0;
 bottom: 0;
 z-index:1;
}
.videoBox .video .videoCenter .videoCenterLeft .titleBox .icon-Play-one {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
}
.videoBox .video .videoCenter .videoCenterLeft .titleBox .p1 {
  margin-left: 21px;
  width: 671px;
  font-size: 20px;
  height: 36px;
  line-height: 36px;
}
.videoBox .video .videoCenter .videoCenterRight {
  width: 368px;
  height: 446px;
  margin-left: 40px;
}
.videoBox .video .videoCenter .videoCenterRight .videotwtop,
.videoBox .video .videoCenter .videoCenterRight .videotwbtm {
  position: relative;
  cursor: pointer;
  width: 368px;
  height: 207px;
	border-radius: 4px;
}
.videoBox .video .videoCenter .videoCenterRight .videotwtop .img1,
.videoBox .video .videoCenter .videoCenterRight .videotwbtm .img1 {
  width: 368px;
  height: 207px;
  margin: auto;
  object-fit: cover;
  transition: all 1.3s;
  border-radius: 4px;
}
.videoBox .video .videoCenter .videoCenterRight .videotwtop:hover img ,
.videoBox .video .videoCenter .videoCenterRight .videotwbtm:hover img{
  transform: scale(1.1);
}
.videoBox .video .videoCenter .videoCenterRight .videotwtop .titleBox,
.videoBox .video .videoCenter .videoCenterRight .videotwbtm .titleBox {
 height: 76px;
 background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
 border-radius: 0px 0px 4px 4px;
 opacity: 1;
 width: 100%;
 padding: 0 16px 18px;
 box-sizing: border-box;
 line-height: 134px;
 display: flex;
 align-items: end;
 left: 0;
 right: 0;
 bottom: 0;
 z-index:1;
}
.videoBox .video .videoCenter .videoCenterRight .videotwtop .titleBox .icon-Play-one,
.videoBox .video .videoCenter .videoCenterRight .videotwbtm .titleBox .icon-Play-one {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 16px;
}
.videoBox .video .videoCenter .videoCenterRight .videotwtop .titleBox .p1,
.videoBox .video .videoCenter .videoCenterRight .videotwbtm .titleBox .p1 {
  margin-left: 8px;
  width: 298px;
  line-height: 28px;
  font-size: 16px;
}

.videoBox .video .videoCenter .videoCenterRight .videotwbtm {
  margin-top: 32px;
}
.videoBox .video .videoBottom {
  margin-top: 32px;
  display: flex;
}
.videoBox .video .videoBottom .videoBtmBox {
  margin-left: 40px;
  width: 208px;
  height: 117px;
  position: relative;
  cursor: pointer;
}
.videoBox .video .videoBottom .videoBtmBox .img1 {
  width: 368px;
  height: 207px;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: cover;
  border-radius: 4px;
}
.videoBox .video .videoBottom .videoBtmBox:hover img{
  transform: scale(1.1);
}
.videoBox .video .videoBottom .videoBtmBox .titleBox {
 height: 48px;
 background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
 border-radius: 0px 0px 4px 4px;
 opacity: 1;
 width: 100%;
 padding: 0 16px 16px;
 box-sizing: border-box;
 line-height: 134px;
 display: flex;
 align-items: end;
 left: 0;
 right: 0;
 bottom: 0;
 z-index:1;
}
.videoBox .video .videoBottom .videoBtmBox .titleBox .icon-Play-one {
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
}
.videoBox .video .videoBottom .videoBtmBox .titleBox .p1 {
  margin-left: 8px;
  width: 152px;
  line-height: 16px;
  font-size: 14px;
}
.videoBox .video .videoBottom .videoBtmBox:first-child {
  margin-left: 0;
}
.videoBox .block_a{
	overflow: hidden;
}
</style>
